<template>
	<view class="goodsCategory">
		<SRV-topbar :title="nowItem.title" messageNum='0' isLeft='true'></SRV-topbar>
        <view class="searchView"  @click="jump('search','')">
            <uni-icons type="search" size="26" color="#000"/>
            <view class="searchInput">商品关键词搜索</view>
            <view class="searchBtn">搜索</view>
        </view>
		<view class="con">
			<scroll-view scroll-y="true" class="left">
				<view :class="index==selIndex?'item check':'item'" v-for="(item,index) in list" :key="index" @click="selItem(index)">
					<text>{{item.title}}</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="right" lower-threshold="50" @scrolltolower="getItem()">
                <view class="mode_1" v-if="nowItem.mode == 1">
                    <view class="item" v-for="(item,index) in childList" :key="index" @click="jump(item.jumpType, item.jumpLink)">
                        <image :src="item.cover" mode="widthFix"></image>
                        <text>{{item.title}}</text>
                    </view>
                </view>
                <view class="mode_2" v-if="nowItem.mode == 2">
                    <view class="titleInfo" @click="operateFun()"  v-if="nowItem.btn.isShow">{{nowItem.btn.title}}</view>
                    <view class="goods" v-for="(item2,index2) in childList" :key="index2">
                        <view class="title">{{item2.title}}
                            <view class="more" @click="jump('product_list', 'cateId='+nowItem.id+'&seriesId='+item2.id)">更多</view>
                        </view>
                        <view class="list" v-if="item2.child">
                            <view class="goods2" v-for="(item3,index3) in item2.child" :key="index3" @click="jump(item3.jumpType, item3.jumpLink)">
                            	<image :src="item3.picture" mode=""></image>
                                <view class="goods_line">
                                    <text class="price_name state_1">会员价</text>
                                    <text class="sale_price">￥{{item3.minPrice}}</text>
                                </view>
                            	<view class="goods_line">
                                    <view class="line_name">
                                        <text v-if="item3.reductionName != ''" style="background:rgba(235, 89, 56, 1);padding: 6rpx;color: #fff;margin-right: 6rpx;">{{item3.reductionName}}</text>
                                        <text>{{item3.name}}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="mode_3" v-if="nowItem.mode == 3">
                    <view class="titleInfo" @click="operateFun()"  v-if="nowItem.btn.isShow">{{nowItem.btn.title}}</view>
                    <view class="goods3" v-for="(item,index) in childList.list" :key="index" @click="jump(item.jumpType, item.jumpLink)">
                    	<image :src="item.picture" mode=""></image>
                        <view class="goods3_line">
                            <view style="width: 55%;">
                                <text :class="'price_name state_'+childList.condition.state">{{childList.condition.message}}</text>
                                <text class="sale_price">￥{{item.scrabble_price}}</text>
                            </view>
                            <view>
                                <text class="cost_price">门市价：</text>
                                <text class="cost_price">￥{{item.market_price}}</text>
                            </view>
                        </view>
                    	<view class="goods_line">
                            <view class="line_name">{{item.name}}</view>
                        </view>
                    </view>
                </view>
                <view class="mode_4" v-if="nowItem.mode == 4">
					<view class="cateList"  v-if="nowItem.id == 0">
						<view :class="selCate == 2 ? 'selCate' : ''" @click="selCateFun(2)">酒类</view>
						<view :class="selCate == 1 ? 'selCate' : ''" @click="selCateFun(1)">茶类</view>
					</view>
                    <view class="goods4" v-for="(item2,index2) in childList" :key="index2"  @click="jump(item2.jumpType, item2.jumpLink)">
                        <image :src="item2.picture" mode=""></image>
                        <view style="width: calc(100% - 180upx);position: relative;">
                            <view class="goods_line">
                                <view class="line_name">
                                    <text v-if="item2.reductionName != ''" style="background:rgba(235, 89, 56, 1);padding: 6rpx;color: #fff;margin-right: 6rpx;">{{item2.reductionName}}</text>
                                    <text>{{item2.name}}</text>
                                </view>
                            </view>
                            <view class="goods_line">
                                <text class="price_name state_1" :style="item2.stock == 0 ? 'color: #999;' : ''">会员价</text>
                                <text class="sale_price" :style="item2.stock == 0 ? 'color: #999;' : ''">￥{{item2.minPrice}}</text>
                            </view>
                            <view v-if="item2.stock == 0" style="color: #999;text-align: right;">已售馨</view>
                        </view>
                    </view>
                </view>
                <view class="mode_5" v-if="nowItem.mode == 5">
                    <view class="titleInfo" @click="operateFun()" v-if="nowItem.btn.isShow">{{nowItem.btn.title}}</view>
                    <view class="goods5" v-for="(item2,index2) in childList" :key="index2"  @click="jump(item2.jumpType, item2.jumpLink)">
                        <image :src="item2.picture" mode=""></image>
                        <view class="goods_line">
                            <text class="price_name state_1">会员价</text>
                            <text class="sale_price">￥{{item2.minPrice}}</text>
                        </view>
                        <view class="goods_line">
                            <view class="line_name">
                                <text v-if="item2.reductionName != ''" style="background:rgba(235, 89, 56, 1);padding: 6rpx;color: #fff;margin-right: 6rpx;">{{item2.reductionName}}</text>
                                <text>{{item2.name}}</text>
                            </view>
                        </view>
                    </view>
                </view>
				<view class="mode_6" v-if="nowItem.mode == 6">
				    <view class="titleInfo" @click="operateFun()"  v-if="nowItem.btn.isShow">{{nowItem.btn.title}}</view>
				    <view class="goods6" v-for="(item,index) in childList" :key="index" @click="jump(item.jumpType, item.jumpLink)">
				    	<image :src="item.picture" mode=""></image>
				        <view class="goods6_line">
				            <view style="width: 55%;">
				                <!-- <text :class="'price_name state_'+childList.condition.state">{{childList.condition.message}}</text> -->
				                <text class="sale_price">￥{{item.price}}</text>
				            </view>
				            <view>
				                <text class="cost_price">剩余数量：</text>
				                <text class="cost_price">{{item.stock}}</text>
				            </view>
				        </view>
				    	<view class="goods_line">
				            <view class="line_name">{{item.name}}</view>
				        </view>
				    </view>
				</view>
                <view v-if="childList.length == 0" class="nocontent">
                	<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png"></image>
                	<text>暂无信息～</text>
                </view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
                list:[],
                childList: [],
                selIndex: -1,
				selCate : 2,
                nowItem: {
                    id: '',
                    title: '',
                    mode: '',
                    btn: {isShow: 0}
                },
                page: 0,
                isEnd: false,
			}
		},
		methods: {
			getList() {
				serve.request({
                    url: '/store/index/special-list',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v2'
                }).then(res => {
                    this.list = res.data;
                    this.selItem(0);
                });
			},
			selItem(key) {
                if(this.selIndex == key) {
                    return ;
                }
				if(key == 0) {
					this.selCate = 2;
				}
				this.selIndex = key;
				this.nowItem = this.list[key];
                this.childList = [];
                this.page = 0;
                this.isEnd = false;
                this.getItem();
			},
			selCateFun(k) {
				this.childList = [];
				this.selCate = k;
				this.page = 0;
				this.isEnd = false;
				this.getItem();
			},
            getItem() {
                if(this.isEnd) {
                    return ;
                }
                this.page++;
                uni.showLoading({
                    title: '加载中',
                    mask: true
                });
                serve.request({
                    url: '/store/index/special-item',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        id: this.nowItem.id,
						t: this.selCate,
                        page: this.page
                    },
                    v: '/v2'
                }).then(res => {
                    uni.hideLoading();
                    if(this.nowItem.mode == 3) {
                        this.childList = res.data;
                        this.isEnd = true;
                        return ;
                    }
                    if (res.data && res.data.length > 0) {
                        this.childList = this.childList.concat(res.data);
                    } else {
                        this.isEnd = true;
                    }
                });
            },
            operateFun() {
                if(this.nowItem.btn.type == '') {
                    return ;
                }
                if(this.nowItem.btn.type == 'jump') {
                    common.jump(this.nowItem.btn.jumpType, this.nowItem.btn.jumpLink);
                    return ;
                }
                if(this.nowItem.btn.type == 'tip') {
                    uni.showModal({
                        title: this.nowItem.btn.jumpType,
                        content: this.nowItem.btn.jumpLink,
                        showCancel:false,
                    });
                    return ;
                }
            },
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
			console.info(uni.getStorageSync('access-token'));
			this.getList();
		},
		onPullDownRefresh() {
			this.getItem();
		}
	}
</script>

<style scoped lang="scss">
	.goodsCategory{
		min-height: 100vh;
        
        .searchView{
        	border: 1rpx solid #333;
        	display: flex;
        	margin: 20rpx;
        	padding: 10rpx 20rpx;
        	border-radius: 20rpx;
        	align-items: center;
        	align-content: center;
        	justify-content: space-between;
        	font-size: 36rpx;
        }
        .searchInput{
        	width: 60vw;
        }
        .searchBtn{
        	    background: #d1b518;
        	    color: #fff;
        	    border-radius: 20rpx;
        	    width: 18vw;
        	    text-align: center;
        	    height: 60rpx;
        	    line-height: 60rpx;
        	    letter-spacing: 10rpx;
        }
        
	    .con{
			display: flex;
            border-top: 1rpx solid #333;
			.left{
				height: calc(100vh - 285upx);
				width: 180upx;
				border: 1upx #EBEBEB solid;
				.item {
					width: 100%;
					color: #666666;
					font-size: 24upx;
					display: inline-block;
					vertical-align: middle;
					line-height: 80upx;
					height: 80upx;
					text-align: center;
					border-bottom: 1upx #EBEBEB solid;
					border-collapse:collapse;
					position: relative;
					z-index: 0;
					text{
						position: relative;
						z-index: 5;
					}
					.sel {
						width: 78upx;
						position: absolute;
						left: 50upx;
						bottom:20upx ;
						z-index: 2;
					}
				}
				.check{
					font-weight:bold ;
					color: #3333FF;
					background: #F7F7F7;    
                    font-size: 30rpx;
				}
				
				
			}
		    .right{
				height: calc(100vh - 285upx);
				width: 570upx;
				background: rgba(204,204,204,0.15);
				
			}
		}
        .mode_1 {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;    
            padding-bottom: 20rpx;
            .item{
            	margin-top: 47upx;
            	display: flex;
            	flex-direction: column;
            	align-items: center;
            	width: 33.3%;
            	image{
            		width:125upx;
            		height:90upx;
            	}
            	text{
            		color: #333333;
            		font-size: 24upx;
            		margin-top: 22upx;
            	}
            }
        }
        .mode_2 {
            .goods {
                box-sizing: border-box;
                width: 100%;
                // padding-bottom: 20rpx;
                .title {
                    font-size: 28rpx;
                    color: #333333;
                    border-top: 1px solid #c1b3b3;
                    padding: 10rpx 30rpx;
                    position: relative;
                }
                .more {
                    position: absolute;
                    right: 30rpx;
                    top: 10rpx;
                }
            }
            .list {
                display: flex;
                box-sizing: border-box;
                flex-wrap: wrap;
                width: 100%;
                .goods2 {
                	width: 44.5%;
                    padding-bottom: 30rpx;
                    border: 6rpx solid #eaeaea;
                    margin-left: 10rpx;
                    padding: 10rpx 4rpx;
                    text-align: center;
                    border-radius: 10rpx;
                	image {
                		width: 200upx;
                		height: 200upx;
                        border: 1rpx solid #eee;
                		border-radius: 2%;
                	}
                	.line_name{
                		font-size:30upx;
                		line-height: 50upx;
                		color: #333;
                		text-overflow: -o-ellipsis-lastline;
                		overflow: hidden;
                		text-overflow: ellipsis;
                		display: -webkit-box;
                		-webkit-line-clamp: 2;
                		-webkit-box-orient: vertical;
                	}
                }
            }
        }
        .mode_3 {
            display: flex;
            box-sizing: border-box;
            flex-wrap: wrap;
            width: 100%;
            .titleInfo{
                width: 100%;
            }
            .goods3 {
            	width: 100%;
                padding-bottom: 30rpx;
                border: 6rpx solid #eaeaea;
                margin: 10rpx 1% 0 1%;
                padding: 10rpx 4rpx;
                text-align: center;
                border-radius: 10rpx;
            	image {
            		width: 500upx;
            		height: 400upx;
                    border: 1rpx solid #eee;
            		border-radius: 2%;
            	}
            	.line_name{
            		font-size:30upx;
            		line-height: 50upx;
            		color: #333;
            		text-overflow: -o-ellipsis-lastline;
            		overflow: hidden;
            		text-overflow: ellipsis;
            		display: -webkit-box;
            		-webkit-line-clamp: 2;
            		-webkit-box-orient: vertical;
            	}
            	.goods3_line{
                    text-align: center;
                    display: flex;
                    align-items: center;
            	}
            }
        }
        .mode_4 {
            display: flex;
            box-sizing: border-box;
            flex-wrap: wrap;
            width: 100%;
			.cateList {
				display: flex;
				padding: 20rpx;
				width: 100%;
				view{
					width: 50%;
					text-align: center;
					letter-spacing: 10rpx;
				}
				.selCate{
					font-size: 34rpx;
					font-weight: bold;
					color: #3333FF;
				}
			}
            .goods4 {
                width: 100%;
                padding-bottom: 30rpx;
                border: 6rpx solid #eaeaea;
                margin-left: 10rpx;
                padding: 10rpx 4rpx;
                text-align: center;
                border-radius: 10rpx;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                image {
                    width: 150upx;
                    height: 150upx;
                    border: 1rpx solid #eee;
                    border-radius: 2%;
                }
                .line_name{
                    font-size:30upx;
                    line-height: 50upx;
                    color: #333;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
        }
        .mode_5 {
            display: flex;
            box-sizing: border-box;
            flex-wrap: wrap;
            width: 100%;
            .titleInfo{
                width: 100%;
            }
            .goods5 {
                width: 44.5%;
                padding-bottom: 30rpx;
                border: 6rpx solid #eaeaea;
                margin-left: 10rpx;
                padding: 10rpx 4rpx;
                text-align: center;
                border-radius: 10rpx;
                image {
                    width: 200upx;
                    height: 200upx;
                    border: 1rpx solid #eee;
                    border-radius: 2%;
                }
                .line_name{
                    font-size:30upx;
                    line-height: 50upx;
                    color: #333;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
        }
		
		.mode_6 {
		    display: flex;
		    box-sizing: border-box;
		    flex-wrap: wrap;
		    width: 100%;
		    .titleInfo{
		        width: 100%;
		    }
		    .goods6 {
		    	width: 100%;
		        padding-bottom: 30rpx;
		        border: 6rpx solid #eaeaea;
		        margin: 10rpx 1% 0 1%;
		        padding: 10rpx 4rpx;
		        text-align: center;
		        border-radius: 10rpx;
		    	image {
		    		width: 500upx;
		    		height: 400upx;
		            border: 1rpx solid #eee;
		    		border-radius: 2%;
		    	}
		    	.line_name{
		    		font-size:30upx;
		    		line-height: 50upx;
		    		color: #333;
		    		text-overflow: -o-ellipsis-lastline;
		    		overflow: hidden;
		    		text-overflow: ellipsis;
		    		display: -webkit-box;
		    		-webkit-line-clamp: 2;
		    		-webkit-box-orient: vertical;
		    	}
		    	.goods6_line{
		            text-align: center;
		            display: flex;
		            align-items: center;
		    	}
		    }
		}
        .titleInfo{
            margin: 20rpx 30rpx;
            text-align: center;
            border: 10rpx solid #ccc037;
            padding: 20rpx 0;
        }
        .goods_line{
            text-align: center;
        }
        .price_name {
            font-size: 28rpx;
            text-align: right;
        }
        .sale_price {
            font-size: 40rpx;
            color: #e61d07;
        }
        .cost_price {
            text-align: right;
            font-size: 28rpx;
            color: #615555;
        }
        .state_0{
            color: #ff000f;
        }
        .state_1{
            color: #FFBC00;
        }
        .state_2{
            color: #0b44ea;
        }
		.nocontent {
			width: 100%;
			padding-top: 338rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 220rpx;
				height: 220rpx;
			}

			text {
				font-size: 28rpx;
				color: rgba(204, 204, 204, 1);
				margin-top: 30rpx;
			}
		}
	}
</style>